<template>
	<view class="commentList">
		<!-- 支付宝自定义导航栏 -->
		<CustomBar />
		<view class="content">
			<view class="comment" v-if="commentList.length > 0">
				<view class="comment-detail" v-for="(item,index) in commentList" @click="goDetail(item.id)">
					<view class="left">
						<view class="avatar">
							<u-avatar :src="item.avatar" shape="circle" :size="100"></u-avatar>
						</view>
						<view class="text">
							<view class="commentUser">
								{{item.createdUserName}}
							</view>
							<view class="commentContent">
								{{item.content}}
							</view>
							<view class="commentTime">
								{{item.createdTime}}
							</view>
						</view>
					</view>
					<view class="right">
						<text v-if="currentUserId == item.createdUserId" class="delete"
							@click="deleteComment(item.id,index)">删除</text>
					</view>
				</view>
			</view>
			<ant-empty v-else title="这里什么也没有" message="看看其它吧" />
		</view>
	</view>
</template>

<script>
	import request from '../../api/index.js'
	export default {
		data() {
			return {
				commentList: [],
				pageNum: 1,
				pageSize: 10,
				total: 0,
				loadMoreStatus: 'more',
				loadMoreText: '查看更多',
				bikeId: ''
			}
		},
		methods: {
			getCommentList() {
				request(`/comment/${this.platform === 'mp-weixin' ? 'wxList' : 'list'}`, {
					bikeId: this.bikeId,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}, 'GET').then(res => {
					if (res.status === 0) {
						this.commentList.push(...res.data.pageData)
						this.totalNum = res.data.total
					}
				})
			},
			async onPullDownRefresh() {
				this.pageNum = 1;
				this.pageSize = 10;
				this.commentList = [];
				await this.getCommentList();
				uni.stopPullDownRefresh();
			},
			async onReachBottom() {
				let allTotalNum = this.pageSize * this.pageNum
				if (allTotalNum < this.totalNum) {
					this.loadMoreStatus = 'loading'; //加载中状态
					this.loadMoreText = '正在加载中'
					this.pageNum++;
					await this.getCommentList()
				} else {
					console.log('已加载全部')
					this.loadMoreStatus = 'noMore'
					this.loadMoreText = '已加载全部'
				}
			},
			deleteComment(id, index) {
				request(`/comment/delete/${id}`).then(res => {
					if (res.status === 0) {
						this.commentList.splice(index, 1)
						Vue.set(this, 'commentList', this.commentList)
						uni.showToast({
							icon: "success",
							title,
							duration: 2000
						});
					}
				})
			},
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: '评论'
			})
			uni.setNavigationBarColor({
				frontColor: '#0000',
				backgroundColor: '#ffffff',
			})
		},
		onLoad(option) {
			this.bikeId = option.bikeId
			this.getCommentList()
		},
		computed: {
			currentUserId: function() {
				return this.$store.state.userInfo.userId
			},
			platform() {
				return this.$store.state.platform
			}
		}
	}
</script>

<style lang="scss" scoped>
	.commentList {
		width: 100%;
		height: 100vh;
		background: linear-gradient(#CFEAFF, #F6F6F6);

		.content {
			padding: 20rpx 40rpx 40rpx;

			.comment {
				.comment-detail {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					margin-bottom: 10px;
					padding-bottom: 10px;
					border-bottom: 1px solid #F6F6F6;

					.left {
						display: flex;
						align-items: flex-start;

						.text {
							margin-left: 10px;

							.commentUser {
								font-size: 30rpxpx;
								// color: #F6F6F6
							}

							.commentContent {
								font-size: 28rpx;
								margin: 5px auto;
								word-break: break-all;
							}

							.commentTime {
								font-size: 26rpx;
							}
						}
					}

					.right {
						.delete {
							color: orangered;
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
</style>
